<template>
  <view style="height: 100%; background-color: #f9f9f9">
    <!-- 去登陆按钮 -->
    <view class="toLogin" v-if="!isShowUserInof"
      ><view class="btn-tologin" @click="toLogin">去登录</view></view
    >
    <view class="getUserInfo" v-else>
      <image
        :src="userInfo.avatarUrl"
        mode=""
        style="width: 100%; height: 100%; filter: blur(10rpx)"
      ></image>
      <view class="userInof">
        <image :src="userInfo.avatarUrl" mode="" class="userImg"></image>
        <text class="userName">{{ userInfo.nickName }}</text>
      </view>
    </view>
    <!-- 我的tab栏 -->
    <view class="userTab">
      <viwe v-for="(item, index) in userTab" :key="index" class="userFnList">
        <view
          hover-class="tabcolor"
          style="text-align: center"
          @click="handlerTab(index)"
        >
          <view
            :class="['iconfont', 'tabIcon', item.icon]"
            hover-class="tabcolor"
          ></view>
          {{ item.name }}
        </view>
      </viwe>
    </view>
    <view style="width: 726rpx; margin: 0, auto">
      <!-- 联系客服 电话按钮 -->
      <view class="model_tab" v-for="(item, index) in modelTab" :key="index" @click="handlerModelTab(index)" v-show="!(index===2)">
        <view class="callkefu" v-if="!(index===2)">
          <view style="display: flex; align-items: center">
            <view
              class="iconfont"
              :class="item.icon"
              style="font-size: 50rpx; margin-right: 30rpx"
            ></view>
            <text>{{ item.name }}</text>
          </view>
          <view v-if="item.cebian">{{ item.cebian }}</view>
        </view>
      </view>
      <!-- 意见反馈 -->
      <!-- 当前版本 -->
			<!-- 如果是小程序平台,显示版本号,如果是web平台,不显示版本号 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="model_tab" >
			  <view class="callkefu">
			    <view style="display: flex; align-items: center">
			      <view
			        class="iconfont icon-banben"
			        style="font-size: 50rpx; margin-right: 30rpx"
			      ></view>
			      <text>当前版本</text>
			    </view>
			    <view >V4.1.1</view>
			  </view>
			<!-- #endif -->
			</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShowUserInof: false,
      userInfo: "",
      userTab: [
        { name: "待付款", icon: "icon-icon-test" },
        { name: "待收货", icon: "icon-daishouhuo" },
        { name: "退货/退款", icon: "icon-tuihuo" },
        { name: "全部订单", icon: "icon-quanbudingdan01" },
      ],
      // isShowtab:4,
      modelTab: [
        { name: "联系客服", icon: "icon-kefu", cebian: "400-618-4000" },
        { name: "意见反馈", icon: "icon-fankuitianbao" },
        { name: "当前版本", icon: "icon-banben", cebian: "V4.1.1" }, //只有小程序才会显示
      ],
			
    };
  },
  async onShow(option) {
    // 获取token
    let [tokenErr, tokenRes] = await uni.getStorage({
      key: "token",
    });
    if (tokenRes) {
      this.isShowUserInof = true;
			// return //没有登录,后面的不再执行
    } 
		else {
  //     this.toLogin();
			return
    }
    // 获取用户基本信息
    let [userErr, userRes] = await uni.getStorage({
      key: "userInfo",
    });
    this.userInfo = userRes.data;
    console.log(this.userInfo);
  },
  methods: {
		// 点击下面的模块tab
	async	handlerModelTab(index){
			if(index===0){
				console.log(1)
			let [err,res]= await uni.makePhoneCall({
				 phoneNumber:"400-618-4000"
			})
			console.log(res)
			}else if(index===1){
				// 跳转到意见页
				uni.navigateTo({
					url:"/pageA/feedback/index"
				})
			}
		},
    // 点击跳转到登录页
    toLogin(index) {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    handlerTab(index) {
      console.log(index);
      if (index === 3) {
        // 跳转到订单页
				// 全部订单
        uni.navigateTo({
          url: "/pages/order/index?order=1",
        });
				// 代付款
      } else if (index === 0) {
        uni.navigateTo({
          url: "/pages/order/index?order=2",
        });
				// 代发货
      } else if (index === 1) {
        uni.navigateTo({
          url: "/pages/order/index?order=3",
        });
      }
    },
  },
};
</script>

<style lang="less">
.toLogin {
  padding: 118rpx 209rpx 143rpx 189rpx;
  .btn-tologin {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 352rpx;
    height: 88rpx;
    background-color: #07c160;
    border-radius: 8rpx;
    font-size: 36rpx;
    color: #ffffff;
  }
}
.getUserInfo {
  position: relative;
  height: 329rpx;
  .userInof {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 172rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .userImg {
    width: 172rpx;
    height: 172rpx;
    border-radius: 50%;
    overflow: hidden;
  }
  .userName {
    color: #fff;
    font-size: 32rpx;
    margin-top: 20rpx;
  }
}
.userTab {
  width: 726rpx;
  height: 144rpx;
  background-color: #fff;
  margin: 20rpx auto;
  border-radius: 15rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.userFnList {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 26rpx;
  color: #474747;
}
.tabIcon {
  margin-bottom: 10rpx;
  font-size: 60rpx;
}
.tabcolor {
  color: #7d00ff;
}
.model_tab {
  box-sizing: border-box;
  width: 726rpx;
  height: 101rpx;
  margin: 0 12rpx;
  background-color: #fff;
  padding: 0 40rpx;
}
.callkefu {
  box-sizing: border-box;
  padding: 31rpx 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #e3e3e3;
  font-size: 26rpx;
  color: #434343;
}
</style>
